<template>
  <div id="app">
    <list @add='add' :list='auto'/>
    <all :auto='auto' @del='del' @chooseOne='chooseOne' @chooseAll='chooseAll' @clear='clear' />
  </div>
</template>
<script>
import list from './components/list'
import all from './components/all'
export default {
  components:{list,all},
  data(){
    return{
      auto:JSON.parse(localStorage.getItem('list'))||[]
    }
  },
  methods: {
    add(val){
      this.auto.push(val)
      localStorage.setItem('list',JSON.stringify(this.auto))
    },
    del(key){
      this.auto.splice(key,1)
      localStorage.setItem('list',JSON.stringify(this.auto))
    },
    chooseOne(key){
      this.auto[key].flag = !this.auto[key].flag
      localStorage.setItem('list',JSON.stringify(this.auto))
    },
    chooseAll(flag){
      this.auto.forEach(item=>{
        item.flag = flag
      })
      localStorage.setItem('list',JSON.stringify(this.auto))
    },
    clear(){
      this.auto = this.auto.filter(item=>item.flag==false)
      localStorage.setItem('list',JSON.stringify(this.auto))
    }
  }
}
</script>
